<template>
  <ZZDialog class="mapSwipe" title="卷帘对比" @close="callbackClose()">
    <el-row :gutter="20">
      <el-col :span="18" :offset="2" style="margin-top: 10px">
        左图层：
        <el-select v-model="leftLayer" placeholder="请选择左侧图层" style="width: 150px" @change="leftLayerChange">
          <el-option v-for="item in selectAllData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="18" :offset="2" style="margin-top: 10px">
        右图层：
        <el-select v-model="rigthLayer" placeholder="请选择右侧图层" style="width: 150px" @change="rightLayerChange">
          <el-option v-for="item in selectAllData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
    </el-row>
  </ZZDialog>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import { useViewer } from '@/stores/viewer';
import ZZDialog from '@/common/ZZDialog.vue';

let viewer: any; //场景视图

onBeforeMount(() => {
  viewer = useViewer().viewer;
});
onMounted(() => {});

const selectAllData = [
  { value: 'bing_img', label: 'Bing影像', type: 'www_bing', layer: 'AerialWithLabels' },
  { value: 'bing_vec', label: 'Bing电子街道', type: 'www_bing', layer: 'Roads' },
  { value: 'baidu_img', label: '百度影像', type: 'www_baidu', layer: 'img_d' },
  { value: 'baidu_vec', label: '百度电子地图', type: 'www_baidu', layer: 'vec' },
  { value: 'gaode_img', label: '高德影像', type: 'www_gaode', layer: 'img_d' },
  { value: 'gaode_vec', label: '高德电子地图', type: 'www_gaode', layer: 'vec' },
  { value: 'google_img', label: '谷歌影像', type: 'www_google', layer: 'img_d' },
  { value: 'google_vec', label: '谷歌电子地图', type: 'www_google', layer: 'vec' }
];

const leftLayer = ref('');
const rigthLayer = ref('');

let layer1: any = null;
let layer2: any = null;
const leftLayerChange = (type: any) => {
  layer1 = viewer.imageryLayers.addImageryProvider(
    zz3d.layer.createImageryProvider({
      type: selectAllData.find(item => item.value === type)?.type,
      layer: selectAllData.find(item => item.value === type)?.layer
    })
  );
  layer1.splitDirection = Cesium.ImagerySplitDirection.LEFT;
  viewer.scene.imagerySplitPosition = 0.5;
};
const rightLayerChange = (type: any) => {
  layer2 = viewer.imageryLayers.addImageryProvider(
    zz3d.layer.createImageryProvider({
      type: selectAllData.find(item => item.value === type)?.type,
      layer: selectAllData.find(item => item.value === type)?.layer
    })
  );
  layer2.splitDirection = Cesium.ImagerySplitDirection.RIGHT;
  viewer.scene.imagerySplitPosition = 0.5;
};

const callbackClose = function () {
  if (layer1) {
    viewer.imageryLayers.remove(layer1);
  }
  if (layer2) {
    viewer.imageryLayers.remove(layer2);
  }
  viewer.scene.imagerySplitPosition = 0;
};
</script>
<style scoped lang="less">
.mapSwipe {
  position: absolute;
  top: 100px;
  right: 200px;
  height: 150px;
  width: 290px;
}
</style>
